<template>
  <div class="wrapper" :style="{'height':showFooter?'calc(100vh - 50px)':'100vh'}">
    <router-view v-slot="{ Component }">
      <!--       :name="transitionName"-->
      <transition :name="transitionName" class="router-view">
        <component :is="Component"/>
      </transition>
    </router-view>
    <!--    <z-tab-bar :tabList="tabList" @change="changeTab"></z-tab-bar>-->
    <!--    <bookTab></bookTab>-->
    <van-tabbar v-if="showFooter" v-model="active" active-color="#000" inactive-color="#00000061" :border="false"
                @change="changeTab">
      <van-tabbar-item replace to="/index">
        <template #icon="props">
          <van-icon name="wap-home-o" style="font-weight: bold;"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/book-store">
        <template #icon="props">
          <van-icon name="idcard" style="font-weight: bold;"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <template #icon="props">
          <van-icon name="bookmark-o" style="font-weight: bold;"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <template #icon="props">
          <van-icon name="manager-o" style="font-weight: bold;"/>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup lang="ts">
import {computed, onMounted, reactive, toRefs, ref, watch} from 'vue'
import {useRoute, onBeforeRouteUpdate} from "vue-router";
import router from './router';

const route = useRoute()
const data = reactive(
    {
      tabList: [
        {
          id: 1,
          name: '首页',
          router: '/index'
        },
        {id: 2, name: '朋友'}, {id: 3, name: '开始'}, {
          id: 4,
          name: '消息'
        }, {id: 5, name: '我的', router: '/my'}],
      transitionName: '',
      routeDeep: ['/index', '/book-store']
    }
)
const active = ref(0);
// 解构出来
const {
  tabList, transitionName, routeDeep
} = toRefs(data)

// watch(route.path,(to, form) => {
//   console.log(to);
//   console.log(form);
// });
watch(() => route.path, (to: any, from: any) => {
      const routeDeep = ['/index', '/book-store']
      const toDepth = routeDeep.indexOf(to)
      const fromDepth = routeDeep.indexOf(from)
      active.value = data.routeDeep.indexOf(route.path)
      data.transitionName = toDepth > fromDepth ? 'fade' : 'fade'
    }
)
onBeforeRouteUpdate((to) => {
  console.log(to, "路由钩子");
});
let showFooter = computed(() => data.routeDeep.indexOf(route.path) > -1)
const changeTab = (index) => {
  active.value = index;
  // router.push( data.tabList[e].router)
}
onMounted(() => {
  console.log(route.path);
  console.log(data.routeDeep.indexOf(route.path));
  // console.log(route.fullPath);
  // router.push('/index')
})
</script>
<style lang="scss">
.wrapper {
  //height: calc(100vh - 50px);
  overflow: auto;
  // 解决抖动
  .router-view {
    width: 100%;
    height: 100%;
    position: absolute;
    // 抵消H5页面tabbar产生的高度
    padding-bottom: 50px;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}
</style>
